import React, { useEffect } from "react"
import { View, Text, StyleSheet, Animated } from "react-native"
import { theme } from "../../constants/theme"

interface ProgressBarProps {
    current: number
    total: number
    showText?: boolean
    textPosition?: "top" | "none"
    height?: number
    backgroundColor?: string
    fillColor?: string
    animationDuration?: number
}

export function ProgressBar({
    current,
    total,
    showText = true,
    textPosition = "top",
    height = 8,
    backgroundColor = "rgba(91, 142, 244, 0.2)",
    fillColor = theme.colors.primary.default,
    animationDuration = 300,
}: ProgressBarProps) {
    // 动画值
    const progressAnim = React.useRef(new Animated.Value(0)).current

    // 更新进度条
    useEffect(() => {
        Animated.timing(progressAnim, {
            toValue: current / total,
            duration: animationDuration,
            useNativeDriver: false,
        }).start()
    }, [current, total, progressAnim, animationDuration])

    return (
        <View style={styles.container}>
            {showText && textPosition === "top" && (
                <View style={styles.textContainer}>
                    <Text style={styles.progressText}>
                        {current}/{total}
                    </Text>
                </View>
            )}

            <View style={[styles.progressContainer, { height, backgroundColor }]}>
                <Animated.View
                    style={[
                        styles.progressBar,
                        {
                            backgroundColor: fillColor,
                            width: progressAnim.interpolate({
                                inputRange: [0, 1],
                                outputRange: ["0%", "100%"],
                            }),
                        },
                    ]}
                />
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        width: "100%",
    },
    textContainer: {
        alignItems: "center",
        marginBottom: theme.spacing.sm,
    },
    progressText: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.primary.default,
    },
    progressContainer: {
        marginHorizontal: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
        borderRadius: 4,
        overflow: "hidden",
    },
    progressBar: {
        height: "100%",
        borderRadius: 4,
    },
})
